<template>
    <div id="area">
        <input type="text" @click="picker.show()" :value="string_value" placeholder="请选择区域" :readonly="true" />
    </div>
</template>

<script>
    import {provinceList,cityList,areaList} from "../../../../../../../../util/area";
    for(let item in areaList){
        if(areaList[item][0] && areaList[item][0].text === "市辖区"){
            areaList[item].shift();
        }
    }
    let address_data = [];
    address_data = provinceList;
    address_data.forEach((province)=>{
        province.children = cityList[province.value];
        province.children.forEach((city) => {
            city.children = areaList[city.value];
        })
    });
    export default {
        name: "area-picker",
        data(){
            return {
                picker:null,
                picker_data:[],  //选择器区域数据
            }
        },
        model:{
            prop:'data',
            event:"change"
        },
        computed:{
            string_value(){
                let value = "";
                if(this.data.length > 0){
                    let data = this.data;
                    if(this.level === 1){
                        value = data[0];
                    }else if(this.level === 2){
                        value = data[0]+'/'+data[1];
                    }else{
                        value = data.join("/");
                    }
                }
                return value;
            }
        },
        watch:{
          data(){
              if(this.data.length > 0){
                  this.setValue();
              }
          }
        },
        props:{
            data:{
                type:Array,
                default(){
                    return []
                }
            },
            level:{
                type:Number,
                default:3
            }
        },
        created() {
            this.createProvince();
        },
        methods:{
            /**
             * 创建省区域选择器picker
             * @param level 区域选择器级别 1=省  2=市 3=区
             */
            createProvince(){
                if(!this.picker){
                    this.picker = this.$createCascadePicker({
                        title: '选择区域',
                        data: address_data,
                        onSelect:(res,res2,res3)=>{
                            this.$emit("change",res3);
                        }
                    });
                }
            },
            /**
             * 设置value
             */
            setValue(){
                let set_data = [];
                for(let i=0;i<address_data.length;i++){
                    if(this.data[0] === address_data[i].text){
                        set_data.push(i);
                        let one_children = address_data[i].children;
                        for(let j=0;j<one_children.length;j++){
                            if(this.data[1] === one_children[j].text){
                                set_data.push(j);
                                let two_children = one_children[j].children;
                                for(let f=0;f<two_children.length;f++){
                                    if(this.data[2] === two_children[f].text){
                                        set_data.push(f);
                                    }
                                }
                            }
                        }
                    }
                }
                this.picker.setData(address_data,set_data);
            }
        }
    }
</script>

<style lang="less" scoped>
    #area input{
        width: 100%;
        height: 45px;
    }
    #area input:disabled{
        background: #fff;
    }
</style>
